function addProject(project_details_json) {
	var project_details = JSON.parse(project_details_json);
	var p_id = project_details["project_id"];
	var title = project_details["title"];
	var description = project_details["description"];
//	var due_to = project_details["due_to"];
//        '  	    <button class="expand_project_button" onclick="toggleProjectDetails($(this).parent().parent())">&#709;</button>',
//        '	        <div class="project_title" onclick="onProjectSelect($(this).parent().parent())">' + title + '</div>',
	var project_template = [
		'<li id="' + p_id + '">',
		'   <div class="ProjectTitle">',
		'       <span class="ProjectTitleText" onclick="onProjectSelect($(this).parent().parent())">',
		'           ' + title,
        '       </span>',
        '       <span class="ProjectTitleButtonsWrapper">',
		'           <button class="ToolButton" onclick="insertNewTaskInputFormBefore($(\'#RootTasksContainer\'), false, \'' + p_id + '\' )">+</button>', //show milestone creation form
		'           <button class="ToolButton" onclick="toggleProjectDetails($(this).parent().parent().parent())">D</button>', //toggle project details
		'           <button class="ToolButton" onclick="enableProjectTitleEditing($(this).parent().parent().parent())">&#9998</button>', //edit
		'           <button class="ToolButton" onclick="deleteProject($(this).parent().parent().parent())">&#10007</button>', //delete
		'       </span>',
        '   </div>',
		'	<div class="ProjectDetails">',
		'       <div class="ProjectDescription" onkeypress="onKeyPressedInProjectDescriptionField(event, this)">',
		'           <button class="ToolButtonStickToRightTopCorner" onclick="enableProjectDescriptionEditing($(this).parent())">&#9998</button>', //edit
		'           <div class="ProjectDescriptionText">',
		'               '+description,
		'           </div>',
		'       </div>',
		'	</div>',
		'</li>'
	].join("\n");
	$("#ProjectsList").prepend(project_template);
	$("#" + p_id).hover(function() {
				$(this).find(".ToolButton").show();
			},
			function() {
				$(this).find(".ToolButton").hide();
			})
	$("#" + p_id + " .ProjectDetails .ProjectDescription").hover(function() {
				$(this).find(".ToolButtonStickToRightTopCorner").show();
			},
			function() {
				$(this).find(".ToolButtonStickToRightTopCorner").hide();
			})
	$("#" + p_id + " .ProjectTitle .ProjectTitleText").editable(function(value, settings) {
		//TODO: insert submit code here
		return value.trim();
	}, {
		width: "none",
		data: function(value, settings) {
			return value.trim();
		},
		onblur: "cancel",
		event: "EnableProjectTitleEditing"
	});
}

function createProject() {
	var project_details = {
		'title': $("#NewProjectFormWrapper form input[name=title]").val(),
		'description': $("#NewProjectFormWrapper form .CreationFormEditableDiv").html()
	};
	pyForm.create_project(JSON.stringify(project_details));
	clearFormElements("#NewProjectFormWrapper form");
    $("NewProjectFormWrapper form .CreationFormEditableDiv").html("");
	hideNewProjectForm();
}

function editProject() {
	/*Get changes in project details and call python's function to apply
	 * changes.
	 * */
}

function onProjectSelect(li) {
	/*When project is selected from the list get it's id, request
	 * milestones, clear milestones list and display milestones there.
	 *
	 * Takes a LI that contains all project details
	 * */
	if (li.find(".ProjectTitle .ProjectTitleText").has("form").length)
		return false;
 	if (li.hasClass("ActiveProject"))
	    //if project is already active -- don't do anything
		return false;
	markProjectAsSelected(li);
	clearCentralPanel();
	var p_id = li.attr("id");

	pyForm.load_root_tasks(p_id);
}

function getActiveProjectID() {
	return $(".ActiveProject").attr("id");
}

function deleteProject(li) {
	/*When "delete project" button pressed get id of this project and make
	 * a request to delete this project. When confirmation received,
	 * remove project function will be called.
	 * */
	var p_id = li.attr("id");
	//TODO: ask python do delete project
	removeProject(p_id);
}

function removeProject(p_id) {
	/*Remove project from the list by given ID. If project is currently active,
	 * clear the milestones list.*/
	var activeProjectID = getActiveProjectID();
	var projectToBeRemoved = $("#" + p_id);
	if (activeProjectID == projectToBeRemoved.attr("id")) {
		clearCentralPanel();
	}
	projectToBeRemoved.fadeOut(200, function() {
		$(this).remove();
	});
}

function enableProjectTitleEditing(project) {
	project.find(".ProjectTitle .ProjectTitleText").trigger("EnableProjectTitleEditing");
}

function enableProjectDescriptionEditing(project_desc) {
	project_desc.attr("contentEditable", "true");
}

function onKeyPressedInProjectDescriptionField(e, t) {
	var key = e.keyCode || e.which;
	if(e.ctrlKey && (key == 10)) //TODO: why 10??
	{
		//TODO: submit data here
		$(t).attr("contentEditable", "false");
	}
}
